<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pou="http://primefaces.org/ui">
    <h:head>
        <title>TODO supply a title</title>
    </h:head>
    <h:body>
        <h:form>
            <ui:composition>
                <script type="text/javascript" src="#{request.contextPath}/js/html2canvas.js.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/libs/BlobBuilder.js/BlobBuilder.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.addimage.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.from_html.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.ie_below_9_shim.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.sillysvgrenderer.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.split_text_to_size.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.standard_fonts_metrics.js"></script>
                <script type="text/javascript">
                    var limit = 1;
                    var counter = 0;
                    var canvasList = new Array();

                    function watcher() {
                        if (counter === limit) {
                            var doc = new jsPDF();
                            doc.text(20, 20, 'Uno Petrol - #{mbSummary.mesInicio+1}/#{mbSummary.anioInicio}');
                            doc.addImage(canvasList[0].toDataURL('image/jpeg'), 'JPEG', 15, 30, 130, 170);
                           
                            doc.output('dataurl');
                        } else {
                            setTimeout(watcher, 1000);
                        }
                    }
                    function topdf() {
                        html2canvas(document.getElementById('micreditform:tablagrids'), {
                            onrendered: function(canvas) {
                                canvasList.push(canvas);
                                counter++;
                            }
                        });
                        
                        setTimeout(watcher, 500);
                        return false;
                    }
                </script>
                <style type="text/css">
                    .colRubro{
                        width: 200px;
                        font-weight: bold;
                    }
                    .colMontos{
                        width: 90px;  
                        text-align: right;
                    }
                    .singleLine
                    {
                        white-space:normal;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        width: 110px;
                    }
                </style>
                <pou:panel id="detalleunidad" rendered="#{mbSummary.showResumenUnidad}" header="Detalle Unidad Negocio: #{mbSummary.unidadNegocioSeleccionada.nombre}">
                    <h:panelGrid >
                        <pou:toolbar rendered="#{mbSummary.showLineasOptions}">
                            <pou:toolbarGroup align="left">
                                <ui:repeat var="ln" value="#{mbSummary.lineasDeNegocios}" >
                                    <pou:commandButton icon="ui-icon-zoomin" value="#{ln.nombre}" immediate="true"
                                                       process="@this" ajax="false"
                                                       actionListener="#{mbSummary.doActionCargarDetalleLineaNegocio(ln)}" 
                                                       onclick="bui.show()"   />
                                </ui:repeat>
                            </pou:toolbarGroup>
                            <pou:toolbarGroup align="right">
                                <pou:commandButton icon="ui-icon-arrowthick-1-s"  ajax="false" value="Descargar">
                                    <pou:fileDownload value="#{mbSummary.content2}" />
                                </pou:commandButton>
                                <pou:commandButton actionListener="#{mbSummary.doExportToPDF()}" 
                                                   onstart="bui.show()" update="dlgPDF"
                                                   oncomplete="showDlgPDF();" icon="ui-icon-print" value="PDF"></pou:commandButton>
                                <pou:commandButton onclick="bui.show()" icon="ui-icon-arrowreturnthick-1-w" immediate="true" update="@form" ajax="false" value="Regresar" actionListener="#{mbSummary.doActionBackUnidades()}" />
                            </pou:toolbarGroup>
                        </pou:toolbar> 
                        <h:panelGrid id="tablagrids">
                            <pou:dataTable emptyMessage="No hay datos para el filtro!" id="datos1" var="fila" value="#{mbSummary.filasG1}">
                                <f:facet name="header">  
                                    Detalle Unidad de Negocio: #{mbSummary.mesInicio+1}/#{mbSummary.anioInicio} - #{mbSummary.unidadNegocioSeleccionada.nombre}
                                </f:facet>  
                                <pou:columns var="col" value="#{mbSummary.columnas}">
                                    <f:facet name="header">
                                        #{col.header}
                                    </f:facet>
                                    <h:panelGroup class="colRubro" layout="block" rendered="#{col.index==0}" >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                    <h:panelGroup class="colMontos" layout="block" rendered="#{col.index>0}"  >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>                                
                                </pou:columns>

                            </pou:dataTable>
                            <pou:dataTable emptyMessage="No hay datos para el filtro!" id="datos2" var="fila" value="#{mbSummary.filasG2}">
                                <pou:columns  var="col" value="#{mbSummary.columnas}">
                                    <f:facet name="header">
                                        #{col.header}
                                    </f:facet>
                                    <h:panelGroup class="colRubro" layout="block" rendered="#{col.index==0}" >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                    <h:panelGroup class="colMontos" layout="block" rendered="#{col.index>0}"  >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                </pou:columns>
                            </pou:dataTable>
                            <pou:dataTable emptyMessage="No hay datos para el filtro!" id="datos3" var="fila" value="#{mbSummary.filasG3}">
                                <pou:columns var="col" value="#{mbSummary.columnas}">
                                    <f:facet name="header">
                                        #{col.header}
                                    </f:facet>
                                    <h:panelGroup class="colRubro" layout="block" rendered="#{col.index==0}" >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                    <h:panelGroup class="colMontos" layout="block" rendered="#{col.index>0}"  >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                </pou:columns>
                            </pou:dataTable>
                            <pou:dataTable emptyMessage="No hay datos para el filtro!" id="datos4" var="fila" value="#{mbSummary.filasG4}">
                                <pou:columns var="col" value="#{mbSummary.columnas}">
                                    <f:facet name="header">
                                        #{col.header}
                                    </f:facet>
                                    <h:panelGroup class="colRubro" layout="block" rendered="#{col.index==0}" >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                    <h:panelGroup class="colMontos" layout="block" rendered="#{col.index>0}"  >
                                        #{fila[col.index].valor}
                                    </h:panelGroup>
                                </pou:columns>
                            </pou:dataTable>
                        </h:panelGrid>
                    </h:panelGrid>
                </pou:panel>
                <pou:blockUI block="detalleunidad" widgetVar="bui">
                    Espere un momento...<br />
                    <h:graphicImage width="16" height="16" library="images" name="ajaxloader2.gif" />
                </pou:blockUI>
                <script type="text/javascript">
                    if (#{mbSummary.exportToPDF}) {
                        topdf();
                    }
                    function showDlgPDF() {
                        setTimeout(function() {
                            bui.hide();
                            dlgPDF.show()
                        }, 1000);
                    }
                </script>
                <pou:dialog id="dlgPDF" height="400" width="500" modal="true" header="Exportacion a PDF" widgetVar="dlgPDF">
                    <h:panelGroup layout="block" rendered="#{mbSummary.exportToPDF}">
                        <iframe src="${facesContext.externalContext.requestContextPath}" 
                                width="100%" height="800px;"
                                scrolling="false" frameborder="0"
                                ></iframe>
                    </h:panelGroup>
                </pou:dialog>
            </ui:composition>
        </h:form>
    </h:body>
</html>
